<template>
	<view>
		<view class="main">
			<view class="essentialInfo">
				<text class="frame"></text>
				<text class="info">基本信息<text class="sympol">*</text></text>
				<view class="infoBox">
					<text class="contactsa">联系人</text>
					<text class="contacts">{{contacts}}</text>
				</view>
				<view class="infoBox">
					<text class="contactsMethods">联系方式</text>
					<text class="contactsphone">{{contactsphone}}</text>
				</view>
			</view>
			<view class="accountInfo">
				<text class="frame"></text>
				<text class="info">账号信息<text class="sympol">*</text></text>
				<view class="infoBox">
					<text class="contactsa">账&nbsp&nbsp号</text>
					<text class="contacts">{{accountnum}}</text>
				</view>
				<view class="infoBox">
					<text class="contactsMethods">密&nbsp&nbsp码</text>
					<text class="contactsphone">{{pwd}}</text>
					<text class="changePwd">修改密码</text>
					<image class="rightjt" src="../../../static/user2/rightjt.png"></image>
				</view>
			</view>
			<view class="storeInfo">
				<text class="frame"></text>
				<text class="info">账号信息<text class="sympol">*</text></text>
				<view class="infoBox">
					<text class="storeinformation">店铺名称</text>
					<text class="storenamea">民商科技</text>
				</view>
				<view class="infoBox">
					<text class="storeinformation">所在地区</text>
					<text class="address">{{address}}</text>
					<image class="backad" src="../../../static/user2/rightjt.png"></image>
				</view>
				<view class="infoBox">
					<text class="storeinformation">详细地址</text>
					<text class="detailaddress">{{detailaddress}}</text>
				</view>
				<view class="infoBox">
					<text class="storeinformation">客服电话</text>
					<text class="customerPhone">{{customerPhone}}</text>
				</view>
				<view class="infoBox">
					<text class="storeinformation">所售类目</text>
					<text class="category">{{category}}</text>
					<image class="backad" src="../../../static/user2/rightjt.png"></image>
				</view>
				<view class="infoBox">
					<text class="storeinformation">店铺类型</text>
					<text class="type">{{type}}</text>
					<image class="backad" src="../../../static/user2/rightjt.png"></image>
				</view>
				<view class="infoBox">
					<text class="storeinformation">店铺头像</text>
					<text class="imgSize">240x240</text>
					<text class="choose">{{choose}}</text>
					<image class="backad" src="../../../static/user2/rightjt.png"></image>
				</view>
				<view class="infoBox">
					<text class="storeinformation">店铺背景</text>
					<text class="imgSize">750x200</text>
					<text class="choosea">{{choosea}}</text>
					<image class="backad" src="../../../static/user2/rightjt.png"></image>
				</view>
			</view>
		</view>
		<view class="submitInfo">提交信息</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contacts: 'xxx',
				contactsphone: '19155628183',
				accountnum: '445445665',
				pwd: '*********',
				address:'安徽省 合肥市 蜀山区',
				detailaddress:'中软国际云上软件园J1A栋19楼',
				customerPhone:'0550-2316',
				category:'生鲜',
				type:'线上商家',
				choose:'请选择',
				choosea:'请选择'
			};
		}
	}
</script>

<style lang="scss">
	.main {
		width: 750rpx;
		position: relative;
		top: 0rpx;
	}

	.essentialInfo {
		width: 710rpx;
		height: 300rpx;
		position: relative;
		left: 20rpx;
	}

	.frame {
		display: block;
		width: 10rpx;
		height: 30rpx;
		background: rgba(115, 34, 216, 1);
		border-radius: 5rpx;
		position: absolute;
		top: 30rpx;
	}

	.info {
		font-size: 28rpx;
		color: #333333;
		position: absolute;
		top: 25rpx;
		left: 22rpx;
	}

	.sympol {
		font-size: 28rpx;
		color: #7322D8;
	}

	.infoBox {
		width: 710rpx;
		height: 100rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		position: relative;
		top: 92rpx;
	}

	.contactsa {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		left: 21rpx;
	}

	.contacts {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		left: 155rpx;
	}

	.contactsMethods {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		left: 21rpx;
	}

	.contactsphone {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		left: 155rpx;
	}

	.accountInfo {
		width: 710rpx;
		height: 300rpx;
		position: relative;
		left: 20rpx;
	}

	.changePwd {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		position: absolute;
		right: 46rpx;
	}

	.rightjt {
		width: 14rpx;
		height: 22rpx;
		position: absolute;
		right: 20rpx;
	}

	.storeInfo {
		width: 710rpx;
		height: 925rpx;
		position: relative;
		left: 20rpx;
	}

	.storeinformation {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.storenamea {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		left: 130rpx;
	}

	.imgSize {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		position: absolute;
		left: 130rpx;
	}
	.address{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
		position: absolute;
		right: 46rpx;
	}
	.backad{
		width: 14rpx;
		height: 22rpx;
		position: absolute;
		right: 20rpx;
	}
	.detailaddress{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
		position: absolute;
		left: 130rpx;
	}
	.customerPhone{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
		position: absolute;
		left: 130rpx;
	}
	.category{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
		position: absolute;
		right: 45rpx;
	}
	.type{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
		position: absolute;
		right: 45rpx;
	}
	.choose{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(142,142,142,1);
		position: absolute;
		right: 45rpx;
	}
	.choosea{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(142,142,142,1);
		position: absolute;
		right: 45rpx;
	}
	.submitInfo{
		width:710rpx;
		height:90rpx;
		background:rgba(115,34,216,1);
		box-shadow:0rpx 0rpx 18rpx 2rpx rgba(115,34,216,0.3);
		border-radius:20rpx;
		font-size:38rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(255,255,255,1);
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		top: 100rpx;
		left: 20rpx;
		margin-bottom: 30rpx;
		}
</style>
